<template>
  <FormView not-form form-width="100%">
    <div style="padding-top: 10px; text-align: center">
      <ElButton type="primary" @click="disabled = !disabled">{{ disabled ? '启用表单' : '禁用表单' }}</ElButton>
      <ElButton type="primary" @click="validForm">校验表单</ElButton>
      <ElButton type="primary" @click="clearValid">清除校验</ElButton>
    </div>
    <ElForm ref="form" :model="entity" :rules="rules" class="form-content" :disabled="disabled" label-position="top">
      <ElRow :gutter="20">
        <ElCol :span="12">
          <ElFormItem label="单个用户" prop="userName">
            <InputUser :id.sync="entity.userId" :name.sync="entity.userName" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="单个部门" prop="ouName">
            <InputDepartment :id.sync="entity.ouId" :name.sync="entity.ouName" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="多个用户" prop="users">
            <InputUser v-model="entity.users" multiple>
              <template #multiple="{ instance, users }">
                <ElInput
                  placeholder="请选择人员"
                  readonly
                  suffix-icon="el-icon-search"
                  :value="users.map(u => u.name).join('、')"
                  @click.native="instance.showPicker()" />
              </template>
            </InputUser>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="多个部门" prop="departments">
            <InputDepartment v-model="entity.departments" multiple>
              <template #multiple="{ instance, departments }">
                <ElInput
                  placeholder="请选择部门"
                  readonly
                  suffix-icon="el-icon-search"
                  :value="departments.map(d => d.ouName).join('、')"
                  @click.native="instance.showPicker()" />
              </template>
            </InputDepartment>
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem label="多个用户" prop="users">
            <InputUser v-model="entity.users" multiple />
          </ElFormItem>
        </ElCol>
        <ElCol :span="24">
          <ElFormItem label="多个部门" prop="departments">
            <InputDepartment v-model="entity.departments" multiple />
          </ElFormItem>
        </ElCol>
      </ElRow>
    </ElForm>
  </FormView>
</template>

<script>
  export default {
    name: 'FormDemo',
    data() {
      return {
        disabled: false,
        entity: {
          userId: -1,
          userName: '',
          users: [],
          ouId: -1,
          ouName: '',
          departments: []
        },
        rules: {
          userName: [
            {
              required: true,
              message: '请选择用户！'
            }
          ],
          ouName: [
            {
              required: true,
              message: '请选择部门！'
            }
          ],
          users: [
            {
              required: true,
              message: '请选择用户！'
            }
          ],
          departments: [
            {
              required: true,
              message: '请选择部门！'
            }
          ]
        }
      }
    },
    methods: {
      validForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.$message.success('表单校验通过！')
          }
        })
      },
      clearValid() {
        this.$refs.form.clearValidate()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form-content {
    width: 720px;
    margin: 0 auto;
  }
</style>
